<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">后台管理系统</div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-man" :size="20"/>
              {{ this.$store.state.user }}
            </MenuItem>

            <MenuItem name="1" :to="{name: 'logout'}">
              <Icon type="md-power" :size="20"/>
              退出登录
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :active-name="activeName" theme="light"
                  ref="leftMenu"  :accordion="true"
                  width="auto" :open-names="openNames">

           <Submenu  v-for="(item, index) in menuList" :key="item.id" :name="item.id">
            <template #title>
              <Icon :type="item.icon"></Icon>
              {{item.name}}
            </template>
            <MenuItem :to="func.link"
                      :name="item.id + '-' + func.id"
                      v-for="func in item.children" :key="func.id">{{func.name}}</MenuItem>
          </Submenu>

          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem :to="{name: 'Home'}">Home</BreadcrumbItem>
            <BreadcrumbItem>{{ menu.name }}</BreadcrumbItem>
            <BreadcrumbItem>{{ func.name }}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <!--   所有路由渲染的结果在此呈现   -->
            <router-view />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>



<script>
export default {
  data(){
    return {
        activeName: '',
        openNames:[],
        menuList: [],
        menu: {},
        func: {},
    }
  },
  methods: {
     handlerMenu(route) {
       // 获取路由的地址
       let path = route.path;
       let func = null;
       // 从 菜单列表中 ，查找 路径对应的 菜单 ID 和 功能ID
       let menu = this.menuList.find(menu => {
         func = menu.children.find(func => func.link === path);
         return func != null;
       })

       if (menu != null) {
         // 打开的菜单是 menu.id
         this.openNames = [menu.id];
         // 选中的功能是 menu.id-func.id
         this.activeName = `${menu.id}-${func.id}`;

         this.menu = menu ;
         this.func = func ;
         // 在 dom 渲染完成后，更新 菜单
         this.$nextTick(()=>{
           this.$refs.leftMenu.updateOpened();
           this.$refs.leftMenu.updateActiveName();
         }) ;
       }else{
         this.menu = {} ;
         this.func = {} ;
       }
     },
     showLeftMenuList() {
        this.$api.queryLeftMenus().then(({data:ret})=> {
            if (ret.status === "10000") {
               this.menuList = ret.data ;
               this.$nextTick(()=>{
                 this.handlerMenu(this.$route);
               })
            }
        })
     }
  },
  created() {
    // 查询 左侧菜单
     this.showLeftMenuList() ;
  },
}
</script>

<style>
.layout{
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.layout-logo{
  width: 150px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}
.layout-nav{
  width: 420px;
  margin: 0 20px 0 auto;
}

.ivu-layout {
  height: 100%;
}
.ivu-layout-content {
  overflow: hidden auto;
  margin-bottom: 20px;
}
</style>
